<!-- 
  路由导航有两种方式：
    1. 声明式导航，使用 router-link 组件
    2. 编程式导航，使用 $router 实例属性来在 js 逻辑中导航

  $route 与 $router 
    1. 当我们项目中使用了 VueRouter 之后，组件上会多出两个实例属性
    2. $route: 表示当前匹配的路由，是一个对象，里面有 path 、fullPath、name、query、params 等属性的一个对象。
    2. $router: 表示路由器实例对象，就是 createRouter() 的返回值，也是一个对象，包含有 push()、replace()、back()、forward()、go() 等属性的一个对象

  push 与 replace 的区别：
    1. push 会增加历史记录
    2. replace 是替换当前历史记录

  获取路由参数:
    1. 获取 query 参数
      $route.query
    2. 获取 params 参数
      $route.params

 -->

<template>
  <div>
    <h1>App</h1>
    <button @click="goHome">go Home</button>
    <br />
    <button @click="goAbout">go About</button>
    <br />
    <!-- RouterLink 增加 replace 属性即可让跳转模式变为 replace 模式 -->
    <RouterLink to="/home" replace>go Home</RouterLink>
    <br />

    <RouterLink to="/one?key1=value1&key2=value2">go one</RouterLink>
    <br />
    <RouterLink to="/two/hello">go two</RouterLink>
    <hr />

    <RouterView />
  </div>
</template>

<script>
import { RouterLink } from "vue-router";

export default {
  created() {
    console.log("this.$route", this.$route);
    console.log("this.$router", this.$router);
  },
  methods: {
    goHome() {
      // this.$router.push("/home");
      this.$router.replace("/home");
    },
    goAbout() {
      this.$router.push({
        name: "about",
      });
    },
  },
  components: { RouterLink },
};
</script>
